<template>
  <div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="id"
          width="150">
      </el-table-column>
      <el-table-column
          prop="cropId"
          label="作物编号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="cname"
          label="产品名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="num"
          label="数量"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="openflow(scope.row.id)">待发货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="gopage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>

    <el-dialog title="物流服务" :visible.sync="dialogFormVisible" width="700px">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="通知人" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="农作物部门" :label-width="formLabelWidth" prop="deptId">
          <el-select v-model="form.deptId" placeholder="请选择部门" clearable>
            <el-option v-for="d in deptdata" :label="d.name" :value="d.id" v-bind:key="d.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remarks">
          <el-select
              v-model="form.remarks"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择备注">
            <el-option  label="冷藏" value="冷藏"></el-option>
            <el-option  label="真空" value="真空"></el-option>
            <el-option  label="新鲜" value="新鲜"></el-option>
            <el-option  label="冻干" value="冻干"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间" :label-width="formLabelWidth" prop="createTime">
          <el-date-picker
              v-model="form.createTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="flow('ruleForm')">提 交 订 单</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "GoodsView",
  data() {
    return {
      //2属性定义
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      tableData:[],
      pageNum:1,
      total:0,
      form:{},
      dialogFormVisible:false,
      formLabelWidth:"120px",
      deptdata:[],
      ruleForm: {
        name: '',
        deptId: '',
        remarks: '',
        createTime: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        deptId: [
          { required: true, message: '请选择通知人', trigger: 'change' }
        ],
        remarks: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ],
        createTime: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
      }
    }
  }, methods: {
    //3自定义方法
    gopage(page){
      this.pageNum=page;
      this.getList();
    },
    getList(){
      this.axios.post("productservice/product/list?pageNum="+this.pageNum).then(res=>{
        this.tableData=res.data.data.list;
        this.total=res.data.data.total;
      })
    },
    deptlist(){
      this.axios.post("flowservice/flow/deptlist").then(res=>{
        this.deptdata=res.data.data;
      })
    },
    openflow(id){
      this.dialogFormVisible=true;
      this.deptlist();
      this.form={};
      this.form.productId=id;
    },
    flow(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("flowservice/flow/flowadd",this.form).then(res=>{
            if(res.data.code==200){
              this.$message.success("已提交订单");
              this.dialogFormVisible=false;
              this.getList();
            }else{
              this.$message.error("提交失败，检查您的订单");
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }, created() {
    //4.钩子函数
    this.getList();
  }
}
</script>

<style scoped>

</style>
